<template>
  <div class="container">
    <Form :model="articleInfo">
      <FormItem class="title" prop="title">
        <Input v-model="articleInfo.title"/>
      </FormItem>
      <FormItem class="tags" prop="tags">
        <Select
          v-model="articleInfo.tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择文章标签">
          <Option
            v-for="item in tagOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </Option>
        </Select>
      </FormItem>
      <FormItem class="btns">
        <Button size="small" plain @click="handleSave">存入草稿</Button>
        <Button size="small" type="primary" @click="handlePost">发布</Button>
      </FormItem>
    </Form>
    <Editor :locale="zhHans" :value="articleInfo.content" :plugins="plugins" @change="handleChange" :uploadImages="onUploadImage" />
  </div>
</template>
<script>
import 'bytemd/dist/index.min.css'
import { Form, FormItem, Input, Select, Option, Button } from 'element-ui'
import { Editor, Viewer } from '@bytemd/vue'
import zhHans from "bytemd/lib/locales/zh_Hans.json";
import gfm from '@bytemd/plugin-gfm'
import articleApi from '@/api/article/index';
const plugins = [
  gfm()
]
export default {
  components:{
    Form,
    FormItem,
    Input,
    Select,
    Option,
    Button,
    Editor
  },
  data(){
    return {
      plugins,
      articleInfo:{
        title:'',
        content:'',
        tags:[]
      },
      tagOptions:[
        {
          label:'1label',
          name:'1'
        },
        {
          label:'2label',
          name:'2'
        },
        {
          label:'3label',
          name:'3'
        }
      ]
    }
  },
  computed:{
    zhHans(){
      return zhHans
    }
  },
  methods: {
    handleChange(data){
      this.$set(this.articleInfo,'content',data)
    },
    handleSave(){
      console.log(this.value)
    },
    handlePost(){
      const params = {
        ...this.articleInfo,
        authorid:this.$store.getters.GET_USERDATA.id,
        updaterid:this.$store.getters.GET_USERDATA.id,
        author:this.$store.getters.GET_USERDATA.username,
        updater:this.$store.getters.GET_USERDATA.username
      }
      articleApi.addArticle(params).then((res)=>{
        console.log('res',res)
      })
    },
    onUploadImage(){
      console.log(1)
    }
  }
}
</script>
<style>
.bytemd {
  height: calc(100vh - 130px);
}
.container{
  padding: 0 10px 10px;
  box-sizing: border-box;
}
.container .el-form{
  height:60px;
  width:100%;
  display: flex;
  flex-wrap:nowrap;
  align-items: center;
  justify-content: flex-end;
}
.container .el-form .title{
  flex: 4 1 auto;
  margin: 0;
}
.container .el-form .tags{
  flex: 1 0 auto;
  margin: 0 0 0 20px;
}
.container .el-form .btns{
  flex: 0 0 200px;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

</style>